import React from "react";

export default function Ref() {
    //1. 创建 ref
    const input = React.useRef(); 
    const result = React.useRef();

    //声明事件的回调
    const show = () => {
        //3. 获取元素对象
        let v = input.current.value;
        //设置
        result.current.innerHTML = v;
    }

    return (
        <div>
            {/* 2. 设置 ref 属性 */}
            <input type="text" ref={input} />
            <button onClick={show}>展示</button>
            <hr />
            <div
                ref={result}
                id="result"
                style={{
                    height: "300px",
                    width: "400px",
                    border: "solid 1px #666",
                }}
            ></div>
        </div>
    );
}
